<template>
  <h1>{{ msg }}</h1>
  <sub-hello ref="subHelloRef" />
  <button @click="showSubHelloRef">showRef</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import SubHello from "./SubHello.vue";
import useLifeCycleTest from "./useLifeCycleTest";
import useSub from "./useSub";

defineProps<{ msg: string }>();
useLifeCycleTest("HelloWorld");
const subHelloRef = ref();
// const showSubHelloRef = () => {
//   console.log("@@@", subHelloRef.value);
// };
const { showSubHelloRef } = useSub(subHelloRef);
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
